﻿/*
 * 公共弹出提示框
 * */
(function () {
    var lgEle = '';
        lgEle +='<div class="modal fade" id="copyPlayerDialog">';
        	lgEle +='<div class="modal-dialog">';
        		lgEle +='  <div class="modal-content"><input type="hidden" id="videoId" value="">';
        			lgEle +='    <div class="modal-header">';
        				lgEle +='      <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>';
        					lgEle +='      <h4 class="modal-title">复制视频链接</h4>';
        						lgEle +='    </div>';
        							lgEle +='    <div class="modal-body">';
        								
        								lgEle +='	<section class="form-inline">';
        									lgEle +='	  <div class="form-group">';
        											lgEle +='	    <p class="form-control-static">播放器大小：</p>';
        												lgEle +='	  </div>';
        													lgEle +='	  <div class="form-group">';
        														lgEle +='	<select class="form-control ke-form-control input-sm" id="keCpSelect" onchange="videoTypeChange(this)">';
        															lgEle +='      <option value="1">迷你640*360</option>';
        															lgEle +='      <option value="2">标准960*540</option>';
        															lgEle +='      <option value="3">大屏1280*720</option>';
        															lgEle +='      <option value="4">超大屏1920*1080</option>';
        																lgEle +='    </select>';
        																lgEle +='	  </div>';
        																lgEle +='	  <div class="form-group">';
        																	lgEle +='	  <span class="form-control-static">宽：</span>';
        																	lgEle +='	  <input class="form-control ke-form-control" id="videoWidth" type="text" value="640px" style="width: 98px;" readonly="readonly">';
        																	lgEle +='	  </div>';
        																	lgEle +='	  <div class="form-group">';
        																	lgEle +='	  <span class="form-control-static">高：</span>';
        																	lgEle +='	  <input class="form-control ke-form-control" id="videoHeight" type="text" value="360px" style="width: 98px;" readonly="readonly">';
        																	lgEle +='	  </div>';
        																	lgEle +='	</section>';
        																		
        												lgEle +='<div style="margin-top: 15px;">';
        												lgEle +='<ul id="myTab" class="nav nav-tabs" role="tablist">';
        													lgEle +='  <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true" onclick="changeCopy(1)">Js代码</a></li>';
        													lgEle +='  <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile" onclick="changeCopy(2)">HTML代码</a></li>';
        													lgEle +='  <li role="presentation"><a href="#keUrl" role="tab" id="keUrl-tab" data-toggle="tab" aria-controls="keUrl" onclick="changeCopy(3)">视频码</a></li>';
        													lgEle +='  <li role="presentation"><a href="#flashCode" role="tab" id="flashCode-tab" data-toggle="tab" aria-controls="flashCode" onclick="changeCopy(4)">播放地址</a></li>';
        													lgEle +='  <li role="presentation"><a href="#QRCode" role="tab" id="QRCode-tab" data-toggle="tab" aria-controls="QRCode" onclick="changeCopy(5)">二维码</a></li>';
        												lgEle +='</ul>';
        												
        												lgEle +='<div id="myTabContent" class="tab-content">';
        												lgEle +='  <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">';
        												lgEle +='    <p><h6><i class="icon-exclamation-sign"></i> Js代码可自动适配电脑，移动终端</h6></p>';
        												lgEle +='    <textarea class="form-control ke-form-control" rows="3" readonly="readonly" id="jsCode"></textarea>';
        												lgEle +='  </div>';
        												lgEle +='  <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">';
        												lgEle +='    <p><h6><i class="icon-exclamation-sign"></i> HTML代码用于编辑页面源代码嵌入播放器，兼容性强</h6></p>';
        												lgEle +='    <textarea class="form-control ke-form-control" rows="3" readonly="readonly" id="htmlCode"></textarea>';
        												lgEle +='  </div>';
        												lgEle +='  <div role="tabpanel" class="tab-pane fade" id="keUrl" aria-labelledby="keUrl-tab">';
        												lgEle +='    <p><h6><i class="icon-exclamation-sign"></i> URL视频码用于各系统使用</h6></p>';
        												lgEle +='    <textarea class="form-control ke-form-control" rows="3" id="keUrlInp" readonly="readonly"></textarea>';
        												lgEle +='  </div>';
        												lgEle +='  <div role="tabpanel" class="tab-pane fade" id="flashCode" aria-labelledby="flashCode-tab">';
        												lgEle +='    <p><h6><i class="icon-exclamation-sign"></i> 播放地址适用于直接输入到浏览器进行播放</h6></p>';
        												lgEle +='    <textarea class="form-control ke-form-control" rows="3" id="flashCodeInp" readonly="readonly"></textarea>';
        												lgEle +='  </div>';
        												lgEle +='  <div role="tabpanel" class="tab-pane fade" id="QRCode" aria-labelledby="QRCode-tab">';
        												lgEle +='    <p><h6><i class="icon-exclamation-sign"></i> 微信二维码用于分享至微信观看(使用微信扫一扫转发)</h6></p>';
        												lgEle +='     <a id="qrcodeDownload">';
        												lgEle +='    	<div rows="3" align="center" id="QRCodeInp" readonly="readonly"></div>';
        												lgEle +='		<div rows="3" align="center">点击下载二维码</div>';
        												lgEle +='     </a>';
        												lgEle +='  </div>'; 
        												lgEle +=' </div>';
        								
        									lgEle +='    </div></div>';
        										lgEle +='    <div class="modal-footer clearfix" style="text-align: left;">';
        											lgEle +='      <button type="button" id="d_clip_button" class="btn btn-warning ke-btn-master btn-lg pull-left" data-clipboard-target="#jsCode">&nbsp;&nbsp;复 制&nbsp;&nbsp;</button>';
        												lgEle +='    <span class="text-success" id="d_clip_copy_txt" style="display: none;margin: 12px 0 0 15px;display: inline-block;"></span>';
        													lgEle +='    </div>';
        														lgEle +='   </div>';
        															lgEle +=' </div>';
        																lgEle +='</div>';

    $('body').append(lgEle);
})();

function videoTypeChange(obj){
	if(obj.value==1){
		$("#videoWidth").val("640px");
		$("#videoHeight").val("360px");
		
		$("#htmlCode").val();
		var htmlCode=getHTMLCode($("#videoId").val(),640,360);
		$("#htmlCode").val(htmlCode);
		
		$("#jsCode").val();
		var jsCode=getJsCode($("#videoId").val(),640,360);
		$("#jsCode").val(jsCode);
		
	}else if(obj.value==2){
		$("#videoWidth").val("960px");
		$("#videoHeight").val("540px");
		
		$("#htmlCode").val();
		var htmlCode=getHTMLCode($("#videoId").val(),960,540);
		$("#htmlCode").val(htmlCode);
		
		$("#jsCode").val();
		var jsCode=getJsCode($("#videoId").val(),960,540);
		$("#jsCode").val(jsCode);
		
	}else if(obj.value==3){
		$("#videoWidth").val("1280px");
		$("#videoHeight").val("720px");
		
		$("#htmlCode").val();
		var htmlCode=getHTMLCode($("#videoId").val(),1280,720);
		$("#htmlCode").val(htmlCode);
		
		$("#jsCode").val();
		var jsCode=getJsCode($("#videoId").val(),1280,720);
		$("#jsCode").val(jsCode);
		
	}else if(obj.value==4){
		$("#videoWidth").val("1920px");
		$("#videoHeight").val("1080px");
		
		$("#htmlCode").val();
		var htmlCode=getHTMLCode($("#videoId").val(),1920,1080);
		$("#htmlCode").val(htmlCode);
		
		$("#jsCode").val();
		var jsCode=getJsCode($("#videoId").val(),1920,1080);
		$("#jsCode").val(jsCode);
	}
}
function getHTMLCode(videoId,video_width,video_height){
	var html ='<object  width="'+video_width+'" height="'+video_height+'" id="v_player_cctv"  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0">';
	html +='<param name="allowFullScreen" value="true" />';
	html +='<param name="allowScriptAccess" value="always" />';
	html +='<param value="transparent" name="wmode" />';
	html +='<param name ="flashvars" value="videoId='+videoId+'" />';
	html +='<param name="movie" value="https://v.96koo.net/static/video/96k.swf" />';
	html +='<embed id="v_player_cctv" width="'+video_width+'" height="'+video_height+'" flashvars="videoId='+videoId+'" allowscriptaccess="always" allowfullscreen="true" menu="false" quality="best" bgcolor="#000000" name="v_player_cctv" src="http://v.96koo.net/static/video/96k.swf" type="application/x-shockwave-flash" lk_mediaid="lk_juiceapp_mediaPopup_1257416656250" lk_media="yes"/>';
	html +='</object>';
	return html;
}

function getJsCode(videoId,video_width,video_height){
	var jsCode =  '<script src="https://v.96koo.net/static/video/js/creatVideoPlayer.js?width='+video_width+'&height='+video_height+'&videoId='+videoId+'" ><\/script>';
	return jsCode;
}

function getflashCode(videoId){
	var flashCode ='http://www.96koo.net/videoPlayer.html?videoId='+videoId;
	return flashCode;
}

function changeCopy(copyType){
	switch(copyType)
	{
		case 1:
			$("#d_clip_button").attr("data-clipboard-target","#jsCode");
		  break;
		case 2:
			$("#d_clip_button").attr("data-clipboard-target","#htmlCode");
		  break;
		case 3:
			$("#d_clip_button").attr("data-clipboard-target","#keUrlInp");
		  break;
		case 4:
			$("#d_clip_button").attr("data-clipboard-target","#flashCodeInp");
		  break;
		case 5:
			$("#d_clip_button").attr("data-clipboard-target","#QRCodeInp");
		  break;
	}
}

function getQRCodeInp(link){
	try {
        document.createElement('canvas').getContext('2d');
        $('#QRCodeInp').qrcode({render: "canvas", height: 500, width: 500, correctLevel: 2, text: link});
    } catch (e) {
        $('#QRCodeInp').qrcode({render: "table", height: 500, width: 500, correctLevel: 2, text: link});
    }
}

function getH5PlayUrl(keUrl,name){
	if(name.length>20){
		name = name.substr(0,20)+"...";
	}
	return "http://admin.96koo.net/common/videoApi/shareH5Play?idVarchar="+keUrl+"&name="+encodeURI(name);
}

// keUrl：视频ID
var cpDialog = function(keUrl,name) {
	var _timer = null;
	$('#QRCodeInp').html("");
	$('.modal-title').text(name);
	$('#videoId').val(keUrl);
	$('#keUrlInp').val(keUrl);
	$('#copyPlayerDialog').modal('show');
	$('#d_clip_copy_txt').hide();
	var htmlCode=getHTMLCode(keUrl,640,360);
	var jsCode =getJsCode(keUrl,640,360);
	var flashCode =getflashCode(keUrl);
	var H5playUrl = getH5PlayUrl(keUrl,name);
	$('#htmlCode').val(htmlCode);	
	$('#jsCode').val(jsCode);
	$('#flashCodeInp').val(flashCode);
	getQRCodeInp(H5playUrl);
	$("#qrcodeDownload").attr("download", name).attr("href", $("canvas")[0].toDataURL("image/png"));
	/*// 定义一个新的复制对象
	var dClipBtn = $("#d_clip_button");	
	var clip = new ZeroClipboard(dClipBtn, {
	  moviePath:"/static/common/ZeroClip/ZeroClipboard.swf"
	} );
	clearTimeout(_timer);*/
	// 复制内容到剪贴板成功后的操作
	/*clip.on( 'complete', function(client, args) {*/
	/*$('#d_clip_copy_txt').show().html('<i class="icon-ok"></i> 已复制成功~~~');
	_timer = setTimeout(function() {
		$('#copyPlayerDialog').modal('hide');
	}, 5000)
	e.clearSelection();
}
);*/
	var clipboard = new Clipboard('#d_clip_button');
	clearTimeout(_timer);
	clipboard.on('success', function(e) {
		$('#d_clip_copy_txt').show().html('<i class="icon-ok"></i> 已复制成功~~~');
		_timer = setTimeout(function() {
			$('#copyPlayerDialog').modal('hide');
			$('#d_clip_copy_txt').hide();
		}, 5000)
		e.clearSelection();
	}
	);
	clipboard.on('error', function(e) {
		$('#d_clip_copy_txt').show().html('<i class="icon-ok"></i> 复制失败~~~');
	    console.error('Action:', e.action);
	    console.error('Trigger:', e.trigger);
	});
	
}
